<template>
    <div>
      <el-row>
        <!--          头像-->
        <el-col :span="2">
          <el-avatar shape="circle" :size="60" :src="getFace( face)"></el-avatar>

        </el-col>
        <el-col :span="22">
          <el-input
            type="textarea"
            :rows="2"
            placeholder=""
            v-model="textareas"
            :disabled="true"
          >
          </el-input>
          <div >
            <el-row>
              <el-col :span="2" ><button @click="oneReply">回复</button></el-col>
              <el-col :span="10" style="text-align : left ">{{sendName}} 回复 {{replyName}} {{dateUtil.stringParseDate ( crDate,dateUtil.NOSS)}}  </el-col>

            </el-row>
          </div>
        </el-col>

      </el-row>

      <!--回复-->
      <el-row v-if="replyFlag">
        <el-col :span="23" :offset="1">
        <!--          头像-->
        <el-col :span="2">
          <el-avatar shape="circle" :size="60" :src="getFace( face)"></el-avatar>

        </el-col>
        <el-col :span="22">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入回复内容"
            v-model="replyText"
          >
          </el-input>
          <div >
            <el-row>

              <el-col :span="2" ><button @click="twoReply" >回复</button></el-col>
            </el-row>
          </div>
        </el-col>
        </el-col>

      </el-row>
    </div>
</template>

<script>
  import {StringUtil} from "../../utils/StringUtil";
  import {Handle} from "../constant/Handle";
  import {ContentType} from "../constant/ContentType";
  import {ResultStatus} from "../constant/ResultStatus";
  import {DateUtil} from "../../utils/DateUtil";

  export default {
        name: "",
      props:{
        textareas:String,//回复内容
        face:String,//头像
        sendName:String,//发送人
        replyName:String,//回复人
        crDate:String,//创建时间
        articalId:Number,//文章id
        replyId:Number,//一级回复id
      },
      data(){
          return{
            baseURL: this.$axios.defaults.baseURL,
            baseIMG: this.$axios.defaults.baseIMG,
            replyText:"",
            userInfo:this.$store.getters.getUserInfo,
            dateUtil:DateUtil,
            replyFlag:false,
            fileServer:this.$axios.defaults.fileServer,
        }
      },
      methods:{
        getFace(data) {
          if (StringUtil.checkNull(data)) {
            return this.baseIMG;
          }
          return this.fileServer + StringUtil.replace(data, '\\', '/');
        },
        oneReply(){
          this.replyFlag = !this.replyFlag;
        },
        twoReply(){
          let commentReq = {
            handle:Handle.ADD,
            contents:this.replyText,
            sendUser:this.userInfo.id,
            articalId:this.articalId,
            replyId:this.replyId,
            replyUser:this.sendName,
          }
          this.$axios.post('/artical/comment/save',commentReq,ContentType.APPLICATION_JSON)
            .then(response=>{
              let datas = response.data;
              if (datas.code == ResultStatus.SUCCESS) {
                this.$notify(StringUtil.success(datas.msg));
              }
              else{
                this.$notify(StringUtil.warning(datas.msg));
              }
            })
            .catch(error=>{
              console.log(error);
              let datas = error.data;
              this.$notify(StringUtil.warning(datas.msg));
            })
          this.$emit('func','');//刷新评论
          this.replyFlag=false;

        },


      }
    }
</script>

<style scoped>

</style>
